<template>
  <mu-flex id="info-root" direction="column">
    <mu-appbar id="appBar" :z-depth="2" color="primary" :title="appBarTitle"></mu-appbar>

    <mu-flex id="content" direction="column" align-items="center">
      <h1>{{ article.title }}</h1>
      <div id="author">{{ article.author }}</div>
      <div id="datetime">{{
        article.releaseTime[0] + '-' +
        article.releaseTime[1] + '-' +
        article.releaseTime[2] + ' ' +
        article.releaseTime[3] + ':' +
        article.releaseTime[4]
        }}</div>
      <div v-html="article.content !== null ? article.content : '<p>' + article.description + '</p>'"></div>
    </mu-flex>
  </mu-flex>
</template>

<script lang="ts">
  import NewsService from "../../../phr/service/knowledge/HealthKnowledgeService";
  import {SUCCESS} from "../../common/ErrorCode";
  import {HealthKnowledge} from '../../service/knowledge/HealthKnowledge';

  let defaultArticle = new HealthKnowledge();
  defaultArticle.releaseTime = [0, 0, 0, 0, 0, 0];

  export default {
    data() {
      return {
        appBarTitle: "资讯详情",
        article: defaultArticle,
      }
    },
    mounted() {
      this.$nextTick(() => {
        if (this.$route.params.title) {
          this.appBarTitle = this.$route.params.title;
        }
        this.article = this.$route.params.article;

        NewsService.getArticleDetail(this.$route.params.article.id)
            .then(res => {
              if (res.code === SUCCESS) {
                this.article = res.value;
              } else {
                this.$toast.info(res.message);
              }
            })
            .catch(e => {
              console.log(e);
              this.$toast.info('网络异常');
            })
      });
    },
  }
</script>

<style scoped>
  #info-root {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  #appBar {
    width: 100%;
  }

  #content {
    padding: 8px 16px;
    overflow: auto;
    flex: 1 1 0 !important;
    width: 100%;
  }

  #content h1 {
    font-size: 24px;
    margin: 0.5em 0;
  }
</style>

<style>
  #info-root p {
    font-size: 16px;
    line-height: 1.5;
    margin: 1em 0;
  }

  #info-root img {
    width: 100%;
  }
</style>